<template>
  <a-card :bordered="false">
    <a-card :bordered="false">
    <!-- 按钮操作区域 -->
    <a-row style="margin-left: 14px">
      <a-button class="ant-btn" @click="handleAdd(1)" type="primary">添加分类</a-button>
      <a-button class="ant-btn" @click="handleAdd(2)" type="primary">添加下级</a-button>
      <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
    </a-row>
    <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
      <a-alert type="info" :showIcon="true">
        <div slot="message">
          当前选择：<span v-if="this.currSelected.categoryName">{{ getCurrSelectedTitle() }}</span>
          <a v-if="this.currSelected.categoryName" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
        </div>
      </a-alert>
      <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入分类名称" />
      <!-- 树-->
      <a-col :md="10" :sm="24">
        <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
         <span style="user-select: none">
            <a-tree
              @select="onSelect"
              :treeData="categoryTree"
              :replace-fields="replaceFields"
              :selectedKeys="selectedKeys"
              :expandedKeys="iExpandedKeys"
              @rightClick="rightHandle"
              @expand="onExpand"
               />
         </span>
           <!--新增右键点击事件,和增加添加和删除功能-->
            <a-menu slot="overlay">
              <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
              <a-menu-item @click="handleEdit" key="2">修改</a-menu-item>
              <a-menu-item @click="handleDelete" key="3">删除</a-menu-item>
              <a-menu-item @click="closeDrop" key="4">取消</a-menu-item>
            </a-menu>
        </a-dropdown>
      </a-col>
    </div>
    </a-card>

    <!-- 新增弹窗 -->
    <datalib-category-modal ref="modalForm" @ok="modalFormOk"></datalib-category-modal>
  </a-card>



</template>
<script>
import { getDblibCategory } from '@api/apiDatalib'
import DatalibCategoryModal from './modal/DatalibCategoryModal'
import { deleteAction } from '@api/manage'
export default {
  components: {
    DatalibCategoryModal
  },
  data() {
    return {
      iExpandedKeys: [],
      visible: false,
      confirmLoading: false,
      allTreeKeys: [],
      replaceFields: {
        children: 'children',
        title: 'categoryName',
        key: 'id',
      },
      currSelected: {},
      title: '',
      categoryTree: [],
      selectedKeys: [],
      paramName:'',
      hiding: true,
      dropTrigger: '',
      rightClickSelectedKey: '',
      rightClickSelectedCode: '',
      rightClickSelectedData:{},
      url: {
        delete: "/dcloud-platform/api/dblibcategory/v1/delete",

      },
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    //加载树
    load() {
      var that = this
      that.categoryTree = []
      const param = {'categoryName': that.paramName}
      getDblibCategory(param).then((res) => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.categoryTree.push(temp)
            that.setThisExpandedKeys(temp)
          }
          this.loading = false
        }
      })
    },

    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.id)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },

    onSearch(value) {
      this.paramName = value
      this.load()
    },

    onSelect(selectedKeys, e) {
      console.log('selected', selectedKeys, e)
      this.hiding = false
      let record = e.node.dataRef
      console.log('onSelect-record', record)
      this.currSelected = Object.assign({}, record)
      this.model = this.currSelected
      this.selectedKeys = [record.id]
      this.model.parentId = record.categoryParCode

    },
    getCurrSelectedTitle() {
      return !this.currSelected.categoryName ? '' : this.currSelected.categoryName
    },
    onClearSelected() { //取消选中
      this.hiding = true
      this.currSelected = {}
      this.selectedKeys = []
    },

    handleAdd(num) { //新增模型
      const model = {}
      if(num === 1){ //添加分类
         model['categoryParCode'] = -1
      }else if(num === 2){ //添加下级
         if(this.currSelected.categoryCode == null){
           this.$warning({ title: '请选择分类'})

           return
         }
         model['categoryParCode'] = this.currSelected.categoryCode
      }else if(num === 3){
        if(this.rightClickSelectedCode == null){
          this.$warning({ title: '未选中分类'})
          return
        }
        model['categoryParCode'] = this.rightClickSelectedCode
      }
      this.$refs.modalForm.add(model);
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.load();
      //清空列表选中
      this.onClearSelected()
    },

    // 右键操作方法
    rightHandle(node) {
      this.dropTrigger = 'contextmenu'
      console.log(node.node.eventKey)
      this.rightClickSelectedKey = node.node.eventKey
      this.rightClickSelectedCode = node.node.dataRef.categoryCode
      this.rightClickSelectedData = node.node.dataRef
    },
    // 右键点击下拉框改变事件
    dropStatus(visible) {
      if (visible == false) {
        this.dropTrigger = ''
      }
    },
    // 右键下拉关闭下拉框
    closeDrop() {
      this.dropTrigger = ''
      this.rightClickSelectedKey = ''
      this.rightClickSelectedCode = ''
      this.rightClickSelectedData = {}
    },

    handleDelete() {
      var that = this;
      this.$confirm({
        title: "提示",
        content: "确定要删除选中的数据吗??",
        onOk: function () {
          deleteAction(that.url.delete, {id: that.rightClickSelectedKey}).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.load();
            } else {
              that.$message.warning(res.message);
            }
          })
        }
      });
      // this.$confirm('确定要删除选中的数据吗?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      //   closeOnClickModal: false
      // }).then(() => {
      //   deleteAction(that.url.delete, {id: this.rightClickSelectedKey}).then((res) => {
      //   if (res.success) {
      //     that.$message.success(res.message);
      //     that.load();
      //   } else {
      //     that.$message.warning(res.message);
      //   }
      //   })
      // })

    },
    handleEdit(){
        this.$refs.modalForm.edit(this.rightClickSelectedData);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
    },
    onExpand(expandedKeys) {

      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },

  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin: 15px;
}

.anty-form-btn {
  width: 100%;
  text-align: center;
}

.anty-form-btn button {
  margin: 0 5px;
}

.anty-node-layout .ant-layout-header {
  padding-right: 0
}

.header {
  padding: 0 8px;
}

.header button {
  margin: 0 3px
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

#app .desktop {
  height: auto !important;
}

/** Button按钮间距 */
.ant-btn {
  margin-left: 3px
}

.drawer-bootom-button {
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>

